<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Stu Nicholls | CSSplay | Vertical Tabs v2 using gif image</title>
<meta name="Author" content="Stu Nicholls">
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, menu, vertical, simple, mouseover, tab. tabbed">
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS">
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=">
<meta http-equiv="imagetoolbar" content="no">


<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels">
<meta http-equiv="pics-Label" content="(pics-1.1 &quot;http://www.icra.org/pics/vocabularyv03/&quot; l gen true for &quot;http://cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for &quot;http://www.cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml">
<link rel="shortcut icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/ico">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<link rel="stylesheet" media="all" type="text/css" href="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/default.css">

<style type="text/css">
#info {height:600px;}

.menu {list-style:none; padding:10px 0 40px 25px; margin:0; width:25px; background:url(tabs/tab_back.gif); border-top:1px solid #593; border-bottom:1px solid #593;}
.menu li {display:block; width:25px; margin-bottom:-29px;}
.menu li a {text-decoration:none; color:#fff; font-size:11px; line-height:10px;}
.menu li a em {display:block; width:25px; height:29px;background:url(tabs/vertical.gif) left top; font-style:normal;}
.menu li a b {display:block; width:15px; padding:0 3px 29px 7px; text-align:center; text-decoration:none; background:url(tabs/vertical.gif) left bottom; color:#fff;}

.menu li a:hover {border:0; position:relative; z-index:100; cursor:pointer;}
.menu li a:hover em {background-position: center top;}
.menu li a:hover b {background-position: center bottom; color:#660;}

.menu li a.selected, .menu li a:hover.selected {border:0; position:relative; z-index:200; cursor:default;}
.menu li a.selected em, .menu li a:hover.selected em {background-position: right top;}
.menu li a.selected b,.menu li  a:hover.selected b {background-position: right bottom; color:#242;}

</style>

<script async="async" src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/s_1e5949aa72023d7e6519f404fd6280d6.js" id="_bsap_js_1e5949aa72023d7e6519f404fd6280d6" type="text/javascript"></script></head>

<body id="menus">
	<div id="wrapper">
	<a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>
		<div id="topad">
	<!-- <img src="http://www.cssplay.co.uk/newweb/ads/468x60.gif" alt="" /> -->
	<div style="float:left; width:468px; height:60px;">
	<script type="text/javascript">
Vertical1242022 = false;
ShowAdHereBanner1242022 = true;
RepeatAll1242022 = false;
NoFollowAll1242022 = false;
BannerStyles1242022 = new Array(
    "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;}",
    "img{border:0;}",
    "a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;}",
    "a.adhere:hover{background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1242022/1242022.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script><script src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/1242022.js" type="text/javascript"></script><style type="text/css">div.bsap_1242022 {width:100%;display:block;} div.bsap_1242022 a{width:468px;} div.bsap_1242022 a img{padding:0;} div.bsap_1242022 a em{font-style:normal;} div.bsap_1242022 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;} div.bsap_1242022 img{border:0;} div.bsap_1242022 a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;} div.bsap_1242022 a.adhere:hover{background:#ddd;color:#333;} div.bsap_1242022 a.adhere{width:468px;height:60px;line-height:480%;} html>body div.bsap_1242022 a.adhere{width:466px;height:58px;} div.bsap_1242022 img.s{height:0;width:0;}div#bsap_1242022 {width:100%;display:block;} div#bsap_1242022 a{width:468px;} div#bsap_1242022 a img{padding:0;} div#bsap_1242022 a em{font-style:normal;} div#bsap_1242022 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;} div#bsap_1242022 img{border:0;} div#bsap_1242022 a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;} div#bsap_1242022 a.adhere:hover{background:#ddd;color:#333;} div#bsap_1242022 a.adhere{width:468px;height:60px;line-height:480%;} html>body div#bsap_1242022 a.adhere{width:466px;height:58px;} div#bsap_1242022 img.s{height:0;width:0;}</style><script type="text/javascript" src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/bsa.js" id="bsap_js"></script><div id="bsap_1242022" class="bsap_1242022 bsap"><a href="http://buysellads.com/buy/detail/13607/zone/1242022?utm_source=site_13607_zone_1242022&amp;utm_medium=website&amp;utm_campaign=adhere" title="Advertise Here" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
</div>
	<img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/shadow_logo.png" alt="">
	<a href="http://www.ibuilt.net/" title="Website Builder" id="ibuilt"><img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/avw.jpeg" alt="Website Builder" title="Website Builder"></a>
	</div>
		<div id="header">
		<div id="logo">
		
			<h1><a accesskey="1" href="http://www.cssplay.co.uk/index" title="Home Page">CSS</a></h1>
			<h2><a accesskey="1" href="http://www.cssplay.co.uk/index" title="Home Page"><i>p</i>lay</a></h2>
			<h3>Experiments with Cascading Style Sheets</h3>
			</div> <!-- end of logo -->
			<div id="toplink">
			<ul>
			<li><a accesskey="W" href="http://www.cssplay.biz/" title="CSSplay.biz Website" rel="nofollow">CSSPLAY.BIZ</a></li>
			<li><a accesskey="H" href="http://www.cssplay.co.uk/service" title="Help and Services">HELP &amp; ASSISTANCE</a></li>
			<li><a accesskey="Q" href="http://www.cssplay.co.uk/faqs" title="Frequently Asked Questions">FAQs</a></li>
			<li><a accesskey="N" href="http://www.cssplay.co.uk/w3c/contact" title="Contact us">CONTACT ME</a></li><li><a accesskey="V" href="http://www.cssplay.co.uk/w3c/privacy" title="Privacy Policy">PRIVACY POLICY</a></li>			<li><a accesskey="S" href="http://www.cssplay.co.uk/sitemap" title="Site map">SITE MAP</a></li>
			<li><a accesskey="K" href="http://www.cssplay.co.uk/accesskeys" title="Accesskeys">ACCESSKEYS</a></li>
			<li><a accesskey="P" href="http://www.cssplay.co.uk/support" title="Support">SUPPORT</a></li>
						<li><a accesskey="R" href="http://www.cssplay.co.uk/feed.xml" title="RSS2.0 feed"><img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/rss.png" alt="rss feed" title="RSS2.0 feed"></a></li>

			</ul>
			</div>
			<div id="midlink">
			<ul id="main_menu">
			<li class="demos"><a accesskey="A" href="http://www.cssplay.co.uk/menu/">Demos</a></li><li class="menus"><a class="chosen" accesskey="M" href="http://www.cssplay.co.uk/menus/">Menus</a></li><li class="layouts"><a accesskey="Y" href="http://www.cssplay.co.uk/layouts/">Layouts</a></li><li class="boxes"><a accesskey="B" href="http://www.cssplay.co.uk/boxes/">Boxes</a></li><li class="mozilla"><a accesskey="Z" href="http://www.cssplay.co.uk/mozilla/">Mozilla</a></li><li class="explorer"><a accesskey="E" href="http://www.cssplay.co.uk/ie/">Explorer</a></li><li class="opacity"><a accesskey="O" href="http://www.cssplay.co.uk/opacity/">Opacity</a></li>			<li class="java"><a accesskey="J" href="http://www.stunicholls.com/" title="Over to http://www.stunicholls.com" rel="nofollow">Javascript</a></li>
			</ul>
			</div>
			<div id="botlink">
			<ul id="sub_menu">

			<li><a accesskey="H" href="http://www.cssplay.co.uk/index">HOME</a></li>
			<li><a href="http://www.cssplay.co.uk/menus/index.html" accesskey="F" title="First - Section List">LIST</a></li><li><a href="http://www.cssplay.co.uk/menus/vertical_tab.html" accesskey="P" title="Previous">PREVIOUS</a></li><li><a href="http://www.cssplay.co.uk/menus/css3-tabs.html" accesskey="N" title="Next">NEXT</a></li><li><a href="http://www.cssplay.co.uk/menus/vertical_slide.html" accesskey="L" title="Last">LAST</a></li>			<li><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Vertical%20Tabs%20v2" accesskey="C" title="Comments for this page">COMMENTS</a></li>
			<li>TUTORIAL</li>			</ul>
			</div> <!-- end of botlink -->
		<div id="search">
<div class="cse-branding-right" style="background-color:transparent;color:#000000">
  <div class="cse-branding-form">
    <form action="http://www.cssplay.co.uk/search.html" id="cse-search-box">
      <div>
        <input name="cx" value="partner-pub-6651950180071236:chrtwm-4ria" type="hidden">
        <input name="cof" value="FORID:10" type="hidden">
        <input name="ie" value="UTF-8" type="hidden">
        <input name="q" size="19" class="search" type="text">
        <input name="sa" value=" Search" type="submit">
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/poweredby_AAAAAA.gif" alt="Google">
  </div>
  <div class="cse-branding-text">
    Custom Search
  </div>
</div>
		</div> <!-- end of search -->

		</div> <!-- end of header -->

<div id="info">

<h2>Vertical tabs v2 - using one gif image</h2>
<h3>23rd February 2007</h3>



<ul class="menu">
<li><a href="http://www.cssplay.co.uk/menus/vertical_tab_two.html?current=one"><em></em><b>H O M E</b></a></li>
<li><a href="http://www.cssplay.co.uk/menus/vertical_tab_two.html?current=two"><em></em><b>P R O D U C T S</b></a></li>
<li><a href="http://www.cssplay.co.uk/menus/vertical_tab_two.html?current=three" class="selected"><em></em><b>C O N T A C T</b></a></li>
<li><a href="http://www.cssplay.co.uk/menus/vertical_tab_two.html?current=four"><em></em><b>S E A R C H</b></a></li>
<li><a href="http://www.cssplay.co.uk/menus/vertical_tab_two.html?current=five"><em></em><b>L<br>I<br>N K S</b></a></li>
</ul>


</div> <!-- end of info -->
<div id="info_right">
<div class="box250">
<h3>CSS play Support</h3>
<div style="width:248px; border:1px solid #ddd; background:#fff; border-width:0 1px; text-align:center;">
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div>
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="3206316" type="hidden">
<input src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/paypal2.png" name="submit" alt="PayPal - The safer, easier way to pay online." type="image">
<img alt="" src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/pixel.gif" width="1" height="1">
</div>
</form>
</div>
</div>

<div class="box250">
<h3>CSS play Recommend</h3>
<p>
<a class="bannerad" href="http://www.dynamicdrive.com/style/"><img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/dynamicdrive.gif" alt="Free, practical CSS menus, layouts, and examples" title="Free, practical CSS menus, layouts, and examples" width="220" height="100"></a>
</p>
<b class="clear"></b>
</div>

<div class="box250">
<h3>Follow CSS play</h3>
<p>
<a href="http://www.facebook.com/pages/CSS-play/133940426647902" rel="nofollow"><img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/facebook.png" alt="Facebook"></a>&nbsp;&nbsp;&nbsp;<a href="http://twitter.com/stucssplay" rel="nofollow"><img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/twitter.png" alt="Twitter"></a>&nbsp;&nbsp;&nbsp;<a href="http://www.cssplay.co.uk/facebook-fan-page.html" rel="nofollow"><img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/fanpage.jpg" alt="Facebook Fan Page"></a>
</p>
<b class="clear"></b>
</div>


<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 250x250, created 2/2/11 */
google_ad_slot = "3830893092";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript" src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:250px"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:250px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_0" name="aswift_0" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="250" frameborder="0" height="250"></iframe></ins></ins>

<br><br>




<div style="padding-left:15px; height:100px;">
<script type="text/javascript">
Vertical1241863 = false;
ShowAdHereBanner1241863 = true;
RepeatAll1241863 = false;
NoFollowAll1241863 = false;
BannerStyles1241863 = new Array(
    "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;}",
    "img{border:0; margin-bottom:8px;}",
    "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;}",
    "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1241863/1241863.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script><script src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/1241863.js" type="text/javascript"></script><style type="text/css">div.bsap_1241863 {width:100%;display:block;} div.bsap_1241863 a{width:220px;} div.bsap_1241863 a img{padding:0;} div.bsap_1241863 a em{font-style:normal;} div.bsap_1241863 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;} div.bsap_1241863 img{border:0; margin-bottom:8px;} div.bsap_1241863 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;} div.bsap_1241863 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div.bsap_1241863 a.adhere{width:220px;height:100px;line-height:800%;} html>body div.bsap_1241863 a.adhere{width:218px;height:98px;} div.bsap_1241863 img.s{height:0;width:0;}div#bsap_1241863 {width:100%;display:block;} div#bsap_1241863 a{width:220px;} div#bsap_1241863 a img{padding:0;} div#bsap_1241863 a em{font-style:normal;} div#bsap_1241863 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;} div#bsap_1241863 img{border:0; margin-bottom:8px;} div#bsap_1241863 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;} div#bsap_1241863 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsap_1241863 a.adhere{width:220px;height:100px;line-height:800%;} html>body div#bsap_1241863 a.adhere{width:218px;height:98px;} div#bsap_1241863 img.s{height:0;width:0;}</style><script type="text/javascript"> _bsap.drop("1e5949aa72023d7e6519f404fd6280d6", 1241863); </script><div id="bsap_1241863" class="bsap_1241863 bsap"><a href="http://stats.buysellads.com/click.go?z=1241863&amp;b=993977&amp;g=&amp;s=&amp;sw=1680&amp;sh=1050&amp;br=firefox,4,win&amp;r=0.4874779067481163&amp;link=http://www.squarespace.com/signup2/?source=cssplay2&amp;campaign=createwebsites&amp;utm_source=cssplay2&amp;utm_medium=banner&amp;utm_campaign=createwebsites" onmouseover="window.status = 'http://www.squarespace.com/signup2/?source=cssplay2&amp;campaign=createwebsites&amp;utm_source=cssplay2&amp;utm_medium=banner&amp;utm_campaign=createwebsites'; return true;" onmouseout="window.status=''; return true;" class="ad1 odd" title="Squarespace | Create beautiful websites." id="bsa_993977" target="_blank"><img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/55086-1301083375.png" alt="Squarespace | Create beautiful websites." width="220" height="100"></a></div>
</div>
<!-- moved to cssplay-pages --><br> <!-- now moved to code -->
</div>

<div id="content">
<div class="plain752" style="margin-top:-15px;">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 728x90, created 3/24/09 */
google_ad_slot = "2160454816";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px"><ins id="aswift_1_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_1" name="aswift_1" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="728" frameborder="0" height="90"></iframe></ins></ins>
</div>
<br class="clear"><br>
<div class="prevNext"><a href="http://www.cssplay.co.uk/menus/vertical_tab.html" accesskey="P" title="Previous Demonstration" class="prevDemo"><b>PREVIOUS</b></a><a href="http://www.cssplay.co.uk/menus/css3-tabs.html" accesskey="N" title="Next Demonstration" class="nextDemo"><b>NEXT</b></a></div>

<div id="left_column">
<h3>Information</h3>

<p>Another vertical tab menu, this time for Martin, who asked if this was possible.</p>
<p>As with the previous menus this one also has the ability to click any
 of the tabs and reload the page with that tab shown selected.</p>
<p>This has been tested in IE6, IE7, Firefox and Opera, it should also work in Safari.</p>
<p>The following images are used in this menu.</p>
<p>The three state tab image:</p>
<img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/vertical.gif" title="tab image" alt="tab image">
<p>The background image:</p>
<img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/tab_back.gif" title="background image" alt="background image">

<div>
<br>
<div class="plain470">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 468x60, created 3/20/09 */
google_ad_slot = "7558797043";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><ins id="aswift_2_anchor" style="display:block;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_2" name="aswift_2" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="468" frameborder="0" height="60"></iframe></ins></ins>
</div>
<br class="clear"><br>
</div>

<h3>Copyright</h3><p>You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to <b class="css">CSS</b><span class="play">play</span> is always appreciated.</p><p>Commercial
 usage is also permitted without seeking approval, but I would ask that a
 donation is considered to support my work on CSSPlay.</p>
<p>If you are having problems integrating any of my demonstrations into 
your website then I now offer a service to fault find and correct any 
errors that you may have introduced. Please email me for more 
information.</p><br>

</div>


<div id="right_column">
<br>
<div class="plain250">
<div>
<span class="spacer"></span>

<ul class="cssplay">
<li>
<br></li></ul>
</div>
</div>

<div class="plain250">
<div>
<span class="spacer"></span>
<ul class="cssplay">
<li>
Each week the Creare Group produce video tutorials for <a href="http://www.crearecommunications.co.uk/">SEO</a> and tips and tricks for the <a href="http://www.crearedesign.co.uk/">web design</a> industry.
</li></ul>
</div>
</div>

<div class="plain250">
<div>
<span class="spacer"></span>
<ul class="cssplay">
<li>
Web designers <a href="http://www.protectyourbubble.com/li-laptop-insurance.html">insure your laptop</a> or macbook with Protect Your Bubble
</li></ul>
</div>
</div>


<div class="box250">
<h3 class="blank">&nbsp;</h3>
<ul class="cssplay">
<li><a href="http://www.uk-cheapest.co.uk/">Register Domain Name</a></li>
<li><a href="http://www.webcreationuk.com/">website design</a> company providing number 1 services for website design and SEO</li>
<li><a href="http://www.online-artikel.de/">Online PR-Portal</a> <b>Social Media News</b><br><span class="text">Our Press releases you can read on OA News</span></li>
<li><a href="http://www.justsearching.co.uk/">Search engine optimisation</a><span class="text"><br>Search engine optimisation specialists to companies throughout the UK and the World</span></li>
<li><a href="http://www.hitsearchlimited.com/seo.php">SEO</a></li>
<li><span class="text">For your one stop shop for all your digital marketing including <a href="http://www.propadesign.co.uk/">web design</a> use propaganda</span></li>
<li><a href="http://www.biteus.net/">SEO</a></li>
<li><a href="http://www.marketingquotes.co.uk/website-design/">website designers</a>&nbsp;Compare local website design prices today</li>
<li><a href="http://www.lava.com.au/">Web Design</a></li>
</ul>
</div>



<div class="box250">
<h3>CSS play Testimonial</h3>
<p>"The <a href="http://www.citroen.co.uk/" rel="nofollow"><img src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/citroenlogo.gif" alt="citroen.co.uk"></a> web site uses<br>CSS play code for the site drop down menus.<br>This code works seamlessly in IE 6 &amp; 7, and is an excellent solution to the Creative requirements of the site."<br><br>
Damon Clark - Brandwidth</p>
</div>
<div class="box250">
<h3>CSS play Links</h3>
<ul>
<li><a href="http://www.cssplay.co.uk/favicon_ads.html">Favicon Advertising</a></li>
<li><a href="http://www.cssplay.co.uk/ads_page.html">Advertising rates</a></li>
<li><a href="http://www.cssplay.co.uk/service.html">Web design &amp; assistance</a></li>
<li><a href="http://www.istu.co.uk/" rel="nofollow"><b>i Stu</b> - NEW website!</a></li>
</ul>
</div>
</div> <!-- end of right column -->
</div> <!-- end of content -->

	<div id="foot">
		<p>© 2005-2011 stu nicholls - cssplay.co.uk - all rights reserved</p>
		<ul>
		<li><a href="http://www.icra.org/sitelabel/" rel="nofollow">ICRA checked site</a></li>
		<li><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict!" rel="nofollow">xhtml 1.0 Strict</a></li>
		<li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cssplay.co.uk/menus/vertical_tab_two.html" title="Valid CSS!" rel="nofollow">css 1/2/3</a></li>
		</ul>
		</div>
	</div> <!-- end of wrapper -->

<script src="%E5%9E%82%E7%9B%B4%E4%B9%A6%E7%AD%BE_files/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>

</body></html>